<style type="text/css">
ul.yiiPager { width: auto; max-width: 1000px; text-align: center; }
ul.yiiPager li { display: inline-block; float: none; }
</style>

<?php
$page_id = isset($this->extra_data['page_id']) ? $this->extra_data['page_id'] : '';
$revision_id = isset($this->extra_data['revision_id']) ? $this->extra_data['revision_id'] : '';
$container = isset($this->extra_data['container']) ? $this->extra_data['container'] : '';
?>

<input type="hidden" id="selected-cat-id" value="<?php echo $this->selected_cat_id; ?>" />
<?php $this->beginWidget('CActiveForm', array('id'=>'form-select-widget','action'=>((isset($this->extra_data['route']) ? $this->controller->createUrl($this->extra_data['route'],array('page_id'=>$page_id,'revision_id'=>$revision_id,'container'=>$container,'template_content_id'=>$this->controller->get('template_content_id',0))) : '')))); ?>
    <input type="hidden" id="selected-widget-id" name="widget" />
    <?php
    echo CHtml::hiddenField('template_content_id',$this->controller->get('template_content_id',0));
    echo CHtml::hiddenField('page_id',$page_id);
    echo CHtml::hiddenField('revision_id',$revision_id);
    echo CHtml::hiddenField('container',$container);
    echo CHtml::hiddenField('route',(isset($this->extra_data['route']) ? $this->extra_data['route'] : ''));
    echo CHtml::hiddenField('for_adding_into_page',($this->for_adding_into_page) ? 1 : 0);
    ?>
    <?php if (is_array($widgets) && count($widgets) > 0) : ?>
        <div class="list-view">
            <div class="section">
                <?php
                foreach($widgets as $key => $widget) :
                    if (($key % 3) == 0) $place = 'first_in_row';
                    elseif ((($key + 1) % 3) == 0) $place = 'last_in_row';
                    else $place = 'middle_in_row';
                    $strOpenTag = '<li>';
                    $strCloseTag = '</li>';
                    if ($place=='first_in_row') $strOpenTag = '<ul class="widget-list"><li>';
                    if ($place=='last_in_row') $strCloseTag = '</li></ul>';
                    if ($key==(count($widgets)-1)) $strCloseTag = '</li></ul>';
                    echo $strOpenTag;
                ?>
                    <div class="widget">
                        <div class="widget-inner">
                            <!--<img class="widget-icon" src="images/wizard.png" />-->
                            <div class="widget-content">
                                <p><?php echo $widget->description; ?></p>
                            </div>                                
                        </div>
                        <a id="widget-<?php echo $widget->id; ?>" href="<?php if ($this->for_adding_into_page) echo '#'; else echo $this->controller->createUrl('/'.$widget->path.'/config',array('widget_id'=>$widget->id)); ?>" class="lnk-select-widget ribbon-link">                                
                            <span><?php echo $widget->name; ?></span>
                        </a>
                    </div>        
                <?php
                    echo $strCloseTag;
                endforeach;
                ?>
            </div>
            <?php
            $this->widget('CLinkPager',array(
                'pages' => $paging,
                'firstPageLabel' => '<<',
                'lastPageLabel' => '>>',
                'prevPageLabel' => '<',
                'nextPageLabel' => '>',
                'header' => '',
                'cssFile' => false
            ));
            ?>
        </div>
    <?php endif; ?>
<?php $this->endWidget(); ?>

<script type="text/javascript">
$(document).ready(function(){
    $('.list-view ul.widget-list').each(function(){
        var max_height = 0;
        $(this).find('li').each(function(){
            var ele_height = $(this).find('.widget-inner').height();
            if (ele_height > max_height) max_height = ele_height;        
        });
        $(this).find('li .widget-inner').height(max_height);   
    });    
});

$('ul.yiiPager li').click(function(){
    var page_url = $(this).find('a').attr('href');
    var pos = page_url.indexOf('&page=');
    var current_page = 1;
    if (pos != -1)
    {
        pos = pos + 6;
        current_page = page_url.substr(pos,page_url.length-pos);
    }
    $.post(
        baseUrl + '/?r=Core/service/widget',
        {
            'WID' : 'Cms.widgets.WidgetsList',
            'selected_cat_id' : $('#selected-cat-id').val(),
            'current_page' : current_page,
            'container_id' : '<?php echo $this->container_id; ?>',
            'extra_data[page_id]' : $('#page_id').val(),
            'extra_data[revision_id]' : $('#revision_id').val(),
            'extra_data[container]' : $('#container').val(),
            'extra_data[route]' : $('#route').val(),
            'for_adding_into_page' : $('#for_adding_into_page').val()
        },
        function(data){
            $('#<?php echo $this->container_id; ?>').html(data);    
        }
    );
    
    return false;    
});

<?php if ($this->for_adding_into_page) : ?>
$('ul li .widget a.lnk-select-widget').click(function(){
    var widget_id = $(this).attr('id').replace('widget-','');
    $('#selected-widget-id').val(widget_id);
    $('#form-select-widget').submit();    
});
<?php endif; ?>
</script>
